<template>
    <div :class="cns" @click="onClick">
        <ph-button :icon="icon" type="transparent"><slot></slot></ph-button>
    </div>
</template>
<script lang="ts">
import { computed, defineComponent, inject, Ref } from 'vue'
import {
    PhButton
} from '../base'
export default defineComponent({
    components:{
        PhButton
    },
    props:{
        icon:{type:String},
        action:{type:String}
    },
    setup(props,{emit}) {
      const cursor = inject('phNavCursor') as Ref<boolean>  
      const current = inject('phNavCurrent') as Ref<string>
      const notify = inject('phNavNotify') as (a:string)=>void
      const active = computed(()=>{
          return props.action===current.value
      })
      const cns = computed(()=>{
          return {
              'ph-nav-item':true,
              'ph-active':active.value,
              'ph-hover-striped-h':!active.value&&cursor.value
          }
      })
      const onClick = ()=>{
          notify(props.action as string)
          emit("navigate",props.action)
      }
      return {
          cns,
          onClick
      }
    },
})
</script>
<style lang="scss">
@import '../../assets/scss/predef.scss';
.ph-nav-item{
    flex: 0 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    background-color: var(--ph-nav-bg);
    .ph-action{
        padding: var(--ph-nav-item-padding);
    }
    &:hover{
        background-color: var(--ph-nav-bg-hover);
        color: var(--ph-nav-color-dark);
    }
    &.ph-active,
    &.ph-active:hover{
        background-color: var(--ph-nav-bg-active);
        color: var(--ph-nav-color-active);
    }
}
</style>
